<template>
  <!-- 商家列表 -->
  <div class="goodsContent">
    <!-- 左侧类目列表 -->
    <ul class="menu">
      <li v-for="(item, index) in goods" :key="item.name">
        <!-- 使用锚点效果写数据跳转连接 -->
        <a :href="`#${index}`">{{ item.name }}</a>
        <!-- <p>{{ item.name }}</p> -->
      </li>
    </ul>

    <!-- 右侧 -->
    <ol class="list">
      <!-- 每个菜单列表 -->

      <li v-for="(item, index) in goods" :key="item.name">
        <!-- 菜单列表名称 -->
        <p :id="index" class="pp1">{{ item.name }}</p>
        <!-- 每个菜单列表下的内容 -->
        <ul class="info">
          <li v-for="food in item.foods" :key="food.name">
            <div class="foodd">
              <!-- 图片 -->
              <div class="img">
                <img :src="food.image" alt="" />
              </div>
              <!-- 右边 -->
              <div class="title">
                <!-- 商品名称 -->
                <p class="p1">{{ food.name }}</p>
                <!-- 商品描述 -->
                <p class="p2">{{ food.description }}</p>
                <p class="p3">
                  月售{{ food.sellCount }}
                  <span>好评率{{ food.rating }}%</span>
                </p>
                <p class="p4">
                  ￥{{ food.price }}
                  <span
                    ><del v-show="food.oldPrice"
                      >￥{{ food.oldPrice }}</del
                    ></span
                  >
                </p>
              </div>
              <!-- <div class="tabs">

              </div> -->
              <!-- <div :class="['btns', { isPosition: type == 0 }]">
                <span v-show="food.count > 0" @click="increment(item)">-</span>
                <p v-show="food.count > 0">{{ food.count }}</p>
                <span @click="add(food)">+</span>
              </div> -->
              <!-- 使用定位进行数量加减操作 -->
              <Btns :item="food" type="0"></Btns>
            </div>
          </li>
        </ul>
      </li>
    </ol>
    <!-- 底部购物车 -->
    <div class="shopCar">
      <p class="p1">
        <img :src="imgsrc" alt="" class="iff" @click="showCar" />
        ￥{{ getPrice }}
      </p>
      <p class="p2">另需配送费￥4元</p>
      <p class="p3">￥20起送</p>
    </div>

    <!-- 购物车遮罩层 -->
    <div class="mask" v-show="show">
      <!-- 购物车列表 -->
      <div class="shopping">
        <p class="pp">
          <span>购物车</span>
          <span @click="qing">清空</span>
        </p>
        <!-- 每一列数据 -->
        <ul>
          <li v-for="(item, index) in carList">
            <p>
              {{ item.name }}
              <span>￥{{ item.price }}</span>
            </p>
            <!-- 使用Btns组件 对购物车里面的数据进行操作 -->
            <Btns :item="item" class="cdd"></Btns>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";
import Btns from "./btns.vue";
export default {
  // props: ['item', 'type'],
  components: {
    Btns,
  },
  created() {
    // 获取商品列表数据
    this.getGoods();
  },
  computed: {
    // 使用state的辅助函数mapState来导出对应的方法，然后进行使用
    ...mapState(["goods", "price", "carList", "show", "img", "imgsrc"]),

    // 计算总价
    getPrice() {
      let num = 0;
      // 循环遍历购物车中的商品价格乘数量
      this.carList.forEach((item) => {
        num += item.price * item.count;
      });
      return num;
    },
  },
  methods: {
    // 导出方法
    ...mapActions(["getGoods"]),
    ...mapMutations(["qing"]),

    // 展示购物车列表
    showCar() {
      this.$store.commit("showCar");
    },
  },
};
</script>

<style lang="less" scoped>
.goodsContent {
  display: flex;
  height: 70vh;

  // background-color: chartreuse;
  .menu {
    height: 65vh;
    overflow: scroll;
    background-color: #f3f5f7;

    li {
      width: 80px;
      // height: 54px;
      // padding: 12px 12px 0px 12px;

      // line-height: 54px;
      text-align: center;
      // padding-top: 20px;
      font-size: 12px;
      font-weight: 200;
      color: rgba(240, 20, 20);
      // line-height: 14px;

      a {
        display: inline-block;
        // white-space: wrap;
        // overflow-wrap: break-word;
        padding: 18px 4px;
        border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      }

      // a:hover{
      //   background-color: #fff;
      // }
    }

    li:nth-child(2) a::before {
      content: "特";
      color: #fff;
      background-color: green;
      padding: 0px 2px;
    }

    li:hover,
    a:hover {
      background-color: #fff;
    }
  }

  .list {
    flex: 1;
    // background-color: aqua;
    height: 65vh;
    overflow: scroll;

    li {
      .pp1 {
        background-color: #f3f5f7;
        font-size: 12px;
        color: rgb(147, 153, 159);
        line-height: 26px;
        border-left: 3px solid #d9dde1;
        text-indent: 14px;
      }
    }

    .info {
      li {
        position: relative;
      }

      .foodd {
        display: flex;
        margin: 18px 18px 0px 18px;
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(7, 17, 27, 0.1);

        img {
          width: 100px;
          height: 96px;
          margin-right: 10px;
        }

        .title {
          .p1 {
            font-size: 14px;
            color: rgba(7, 17, 27);
            line-height: 14px;
          }

          .p2 {
            font-size: 10px;
            color: rgb(147, 153, 159);
            line-height: 14px;
            margin: 8px 0px;
          }

          .p3 {
            font-size: 10px;
            color: rgb(147, 153, 159);
            line-height: 10px;

            span {
              margin-left: 12px;
            }
          }

          .p4 {
            font-size: 14px;
            color: red;
            font-weight: 700;
            line-height: 24px;

            span {
              font-size: 10px;
              color: rgb(147, 153, 159);
            }
          }
        }
      }
    }
  }

  .shopCar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    // background: blue;
    // height: 60px;
    z-index: 200;
    color: #fff;
    background-color: #141d27;
    display: flex;

    .p1 {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.4);
      font-weight: 700;
      line-height: 24px;
      border-right: 1px solid rgb(255, 255, 255, 0.1);
      margin: 22px 0px;
      padding-left: 70px;
      padding-right: 12px;
      position: relative;

      .iff {
        position: absolute;
        width: 60px;
        bottom: 10px;
        left: 5px;
      }
    }

    .p2,
    .p3 {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.4);
      // font-weight: 700;
      line-height: 24px;
      padding: 22px 0px;
    }

    .p2 {
      padding-left: 12px;
      flex: 1;
    }

    .p3 {
      text-align: center;
      background-color: rgba(255, 255, 255, 0.4);
      width: 105px;
    }
  }
}

// .btns {
//   position: absolute;
//   right: 10px;
//   bottom: 14px;
//   display: flex;

//   span:first-child {
//     margin-right: 6px;
//   }

//   span:last-child {
//     margin-left: 6px;
//   }

//   span {

//     display: block;
//     width: 24px;
//     height: 24px;
//     line-height: 20px;
//     border-radius: 50%;
//     text-align: center;
//     font-size: 24px;
//     font-weight: bold;
//     color: rgb(0, 160, 220);
//     border: 2px rgb(0, 160, 220) solid;
//     // background-color: blue;
//   }

//   p {
//     padding-top: 3px;
//   }
// }

.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  background-color: rgba(7, 17, 27, 0.6);
  backdrop-filter: blur(5px);

  .shopping {
    width: 100%;
    height: 305px;
    overflow-y: scroll;
    // background-color: aqua;
    position: absolute;
    bottom: 0;
    background-color: #fff;
    //
    .pp {
      display: flex;
      background-color: #f3f5f7;
      // padding: 6px 0px;
      line-height: 40px;
      padding: 0px 18px;
      font-size: 14px;
      justify-content: space-between;
      font-weight: 200;
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      span:last-child {
        // background: #141d27;
        color: rgb(0, 160, 220);
      }
    }
    ul {
      li {
        font-size: 14px;
        color: rgba(7, 17, 27);
        line-height: 48px;
        border-bottom: 1px solid rgba(7, 17, 27, 0.1);
        margin: 0px 18px;
        height: 48px;
        display: flex;
        font-weight: 700;
        position: relative;
        p {
          span {
            color: red;
          }
        }
        .cdd {
          position: absolute;
          right: 18px;
          top: 10px;
          line-height: 30px;
        }
      }
    }
  }
}
</style>
